<template>
  <div class="left-box" >
      <ul class="left-menu-list">
          <li v-for="(item,key) in menu" :key="key">
              <div :class="menu_index == key ? ' left-menu-parent parent-active' : 'left-menu-parent'" @click="showChild(key)">
                  <i :class="item.icon"></i>
                  <span>{{item.name}}</span>
                  <Icon type="md-arrow-dropdown" :style="item.show ? 'transform: rotate(-180deg)' : ''"/>
              </div>
              <div class="left-menu-child" :style="item.show ? 'height:'+(38 * item.child.length)+'px' : 'height:0'">
                  <div class="left-menu-chid-name" :style="menu_index == key && child_index == keys ? 'color:#f4c721' : ''"  v-for="(items,keys) in item.child" :key="keys" @click.stop="toPage(key,keys)">{{items.name}}</div>
              </div>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
    data(){
        return {
            menu : [
                {
                    name : '首页',
                    icon : 'iconfont icon-shouye1',
                    url : '',
                    show: false,
                    child : [
                        {name : '面板数据' , icon : '' , url : '/stage/index/index' }
                    ]
                },
                {
                    name : '用户管理',
                    icon : 'iconfont icon-denglu1',
                    url : '',
                    show: false,
                    child : [
                        {name : '用户列表' , icon : '' , url : '/stage/user/list' }
                    ]
                },
                {
                    name : '跑团管理',
                    icon : 'iconfont icon-tuandui1',
                    url : '',
                    show: false,
                    child : [
                        {name : '跑团列表' , icon : '' , url : '/stage/team/list' },
                        {name : '跑团认证' , icon : '' , url : '/stage/team/cation' }
                    ]
                },
                {
                    name : '活动管理',
                    icon : 'iconfont icon-activity_icon',
                    url : '',
                    show: false,
                    child : [
                        {name : '活动列表' , icon : '' , url : '/stage/active/list' },
                        {name : '活动需求' , icon : '' , url : '/stage/active/needs' }
                    ]
                },
                {
                    name : '投诉建议',
                    icon : 'iconfont icon-xiaoxi',
                    url : '',
                    show: false,
                    child : [
                        {name : '投诉建议' , icon : '' , url : '/stage/fade/list' }
                    ]
                },
                {
                    name : '账单管理',
                    icon : 'iconfont icon-cedaohang-caiwuguanl',
                    url : '',
                    show: false,
                    child : [
                        {name : '账单列表' , icon : '' , url : '/stage/finance/list' },
                        {name : '提现管理' , icon : '' , url : '/stage/finance/cash' }
                    ]
                },
                {
                    name : '系统设置',
                    icon : 'iconfont icon-shezhi1',
                    url : '',
                    show: false,
                    child : [
                        {name : '帮助文档' , icon : '' , url : '/stage/setting/doc' },
                        {name : '管理员设置' , icon : '' , url : '/stage/setting/manage' },
                        {name : '修改密码' , icon : '' , url : '/stage/setting/pwd' },
                        {name : 'APP版本' , icon : '' , url : '/stage/setting/version' }
                    ]
                }
            ],
            menu_index : 0,
            child_index : 0,
            show:true,
        }
    },
    mounted(){
        //设置路由下标
        this.setRouteIndex(this.$route.path);
    },
    methods:{
        //展开菜单
        showChild(key){
            this.menu[key].show = !this.menu[key].show;
        },
        //页面跳转
        toPage(key,keys){
            var to = this.$route.path;
            var from = this.menu[key].child[keys].url;
            if(to == from)return false;
            this.menu_index = key;
            this.child_index = keys;
            this.$router.push({
                path : this.menu[key].child[keys].url
            });
        },
        //通过路由判断位置
        checkRouteIndex(url){
            for(var i in this.menu) {
                for(var x in this.menu[i].child) {
                    if(this.menu[i].child[x].url == url) return [i,x];
                }
            }
            return [this.menu_index, this.child_index ];
        },
        //设置路由下标
        setRouteIndex(url){
            //获取下标
            var index_arr = this.checkRouteIndex(url);
            this.menu_index = index_arr[0];
            this.child_index = index_arr[1];
            // console.log(index_arr)
            this.menu[this.menu_index].show = true;
        }
    },
    watch:{
        $route(to,from){
            var path = to.path;
            this.setRouteIndex(path);
        }
    }
}
</script>

<style>
@import url('../../assets/css/common/left.css');
</style>